<template>
  <div class="content-area">
    <!-- 统计卡片 -->
    <div class="stats-cards">
      <div class="stats-card clinical">
        <div class="stats-icon">
          <el-icon><FirstAidKit /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">{{ stats.clinicalCount }}</div>
          <div class="stats-label">临床科室</div>
        </div>
      </div>
      <div class="stats-card technical">
        <div class="stats-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">{{ stats.technicalCount }}</div>
          <div class="stats-label">医技科室</div>
        </div>
      </div>
      <div class="stats-card administrative">
        <div class="stats-icon">
          <el-icon><OfficeBuilding /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">{{ stats.administrativeCount }}</div>
          <div class="stats-label">行政科室</div>
        </div>
      </div>
      <div class="stats-card finance">
        <div class="stats-icon">
          <el-icon><Money /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">{{ stats.financeCount }}</div>
          <div class="stats-label">财务科室</div>
        </div>
      </div>
      <div class="stats-card pharmacy">
        <div class="stats-icon">
          <el-icon><Goods /></el-icon>
        </div>
        <div class="stats-content">
          <div class="stats-number">{{ stats.pharmacyCount }}</div>
          <div class="stats-label">药房</div>
        </div>
      </div>
    </div>

    <!-- 筛选卡片 -->
    <div class="filter-card">
      <div class="filter-row">
        <div class="filter-item">
          <div class="filter-label">科室名称</div>
          <el-input
            v-model="filters.department_name"
            placeholder="请输入科室名称"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">科室编号</div>
          <el-input
            v-model="filters.department_code"
            placeholder="请输入科室编号"
            clearable
          />
        </div>
        <div class="filter-item">
          <div class="filter-label">科室类型</div>
          <el-select
            v-model="filters.department_type"
            placeholder="请选择科室类型"
            clearable
          >
            <el-option
              v-for="type in departmentTypes"
              :key="type.department_type_id"
              :label="type.department_type_name"
              :value="type.department_type_id"
            />
          </el-select>
        </div>
        <div class="filter-item">
          <div class="filter-label">状态</div>
          <el-select
            v-model="filters.department_active"
            placeholder="请选择状态"
            clearable
          >
            <el-option label="启用" value="0" />
            <el-option label="停用" value="1" />
          </el-select>
        </div>
      </div>
      <div class="action-buttons">
        <el-button @click="resetFilters">重置</el-button>
        <el-button type="primary" @click="searchDepartments">查询</el-button>
        <el-button type="success" @click="showAddDepartmentDialog">
          <el-icon><Plus /></el-icon>
          新增科室
        </el-button>
      </div>
    </div>

    <!-- 科室表格 -->
    <div class="department-table">
      <div class="table-header">
        <div class="table-title">科室列表</div>
        <div class="table-tools">
          <el-button type="primary" @click="exportData">
            <el-icon><Document /></el-icon>
            导出数据
          </el-button>
          <el-button @click="refreshData">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
        </div>
      </div>
      <div class="department-table-container">
        <el-table
          :data="departments"
          style="width: 100%"
          key="department-table"
          :debounce="100"
          stripe
        >
          <el-table-column type="selection" width="55" />
          <el-table-column
            prop="department_code"
            label="科室编号"
            width="120"
          />
          <el-table-column label="科室信息" min-width="180">
            <template #default="{ row }">
              <div class="department-info">
                <div class="department-icon">
                  <el-icon><OfficeBuilding /></el-icon>
                </div>
                <div>
                  <div>{{ row.department_name }}</div>
                  <div style="font-size: 12px; color: #909399">
                    {{ formatDepartmentType(row.department_type) }} ·
                    {{ row.doctor_count }}位医生 · {{ row.nurse_count }}位护士 ·
                    {{ row.pharmacist_count }}位药师 ·
                    {{ row.finance_count }}位财务
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="department_master"
            label="科室主任"
            width="120"
          />
          <el-table-column
            prop="department_phone"
            label="联系电话"
            width="150"
          />
          <el-table-column
            prop="department_location"
            label="科室位置"
            width="180"
          />
          <el-table-column label="状态" width="100">
            <template #default="{ row }">
              <el-tag
                :type="row.department_active === '0' ? 'success' : 'info'"
                size="small"
              >
                {{ row.department_active === "0" ? "启用" : "停用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220" fixed="right">
            <template #default="{ row }">
              <div class="action-buttons-cell">
                <el-button size="small" @click="viewDepartmentDetails(row)"
                  >详情</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  @click="editDepartmenthandle(row)"
                >
                  编辑
                </el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="deleteDepartment(row)"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>

  <!-- 新增/编辑科室对话框 -->
  <el-dialog
    v-model="departmentDialog.visible"
    :title="departmentDialog.isEdit ? '编辑科室信息' : '新增科室'"
    width="600px"
  >
    <el-form
      :model="departmentForm"
      label-width="100px"
      :rules="departmentRules"
      ref="departmentFormRef"
    >
      <el-form-item label="科室编号" prop="department_code">
        <el-input
          v-model="departmentForm.department_code"
          placeholder="请输入科室编号"
        />
      </el-form-item>
      <el-form-item label="科室名称" prop="department_name">
        <el-input
          v-model="departmentForm.department_name"
          placeholder="请输入科室名称"
        />
      </el-form-item>
      <el-form-item label="科室类型" prop="department_type">
        <el-select
          v-model="departmentForm.department_type"
          placeholder="请选择科室类型"
        >
          <el-option
            v-for="type in departmentTypes"
            :key="type.department_type_id"
            :label="type.department_type_name"
            :value="type.department_type_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="科室主任" prop="department_master">
        <el-input
          v-model="departmentForm.department_master"
          placeholder="请输入科室主任姓名"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="department_phone">
        <el-input
          v-model="departmentForm.department_phone"
          placeholder="请输入联系电话"
        />
      </el-form-item>
      <el-form-item label="科室位置" prop="department_location">
        <el-input
          v-model="departmentForm.department_location"
          placeholder="请输入科室位置"
        />
      </el-form-item>
      <el-form-item label="床位数量" prop="department_beds">
        <el-input-number
          v-model="departmentForm.department_beds"
          :min="0"
          :max="1000"
        />
      </el-form-item>
      <el-form-item label="状态" prop="department_active">
        <el-radio-group v-model="departmentForm.department_active">
          <el-radio label="0">启用</el-radio>
          <el-radio label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="科室简介" prop="department_decription">
        <el-input
          v-model="departmentForm.department_decription"
          type="textarea"
          :rows="3"
          placeholder="请输入科室简介"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="departmentDialog.visible = false">取消</el-button>
      <el-button type="primary" @click="submitDepartmentForm">确认</el-button>
    </template>
  </el-dialog>

  <!-- 右侧抽屉：科室详情 -->
  <el-drawer
    v-model="detailDrawer.visible"
    direction="rtl"
    size="600px"
    with-header
    :destroy-on-close="false"
  >
    <template #header>
      <div class="drawer-custom-header">
        <h3>科室详情</h3>
      </div>
    </template>

    <div class="drawer-content-wrapper">
      <!-- 顶部信息卡片 -->
      <div class="staff-profile-card">
        <div class="profile-header">
          <div class="department-icon-large">
            <el-icon><OfficeBuilding /></el-icon>
          </div>
          <div class="profile-info">
            <h2 class="staff-name">{{ departmentDetail.department_name }}</h2>
            <div class="staff-meta">
              <el-tag type="primary" size="small">
                {{ formatDepartmentType(departmentDetail.department_type) }}
              </el-tag>
              <span class="work-id">{{
                departmentDetail.department_code
              }}</span>
            </div>
            <div class="staff-status">
              <el-tag
                :type="
                  departmentDetail.department_active === '0'
                    ? 'success'
                    : 'info'
                "
                size="small"
              >
                {{
                  departmentDetail.department_active === "0" ? "启用" : "停用"
                }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细信息区域 -->
      <div class="detail-sections">
        <!-- 基本信息 -->
        <div class="detail-section">
          <div class="section-header">
            <el-icon><InfoFilled /></el-icon>
            <span>基本信息</span>
          </div>
          <div class="section-content">
            <div class="info-grid">
              <div class="info-item">
                <label>科室主任</label>
                <span>{{
                  departmentDetail.department_master || "未设置"
                }}</span>
              </div>
              <div class="info-item">
                <label>联系电话</label>
                <span>{{ departmentDetail.department_phone || "未填写" }}</span>
              </div>
              <div class="info-item">
                <label>科室位置</label>
                <span>{{
                  departmentDetail.department_location || "未填写"
                }}</span>
              </div>
              <div class="info-item">
                <label>床位数量</label>
                <span class="highlight"
                  >{{ departmentDetail.department_beds || 0 }} 张</span
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 人员统计 -->
        <div class="detail-section">
          <div class="section-header">
            <el-icon><User /></el-icon>
            <span>人员统计</span>
          </div>
          <div class="section-content">
            <div class="info-grid">
              <div class="info-item">
                <label>医生数量</label>
                <span class="highlight"
                  >{{ departmentDetail.doctor_count || 0 }} 位</span
                >
              </div>
              <div class="info-item">
                <label>护士数量</label>
                <span class="highlight"
                  >{{ departmentDetail.nurse_count || 0 }} 位</span
                >
              </div>
              <div class="info-item">
                <label>药师数量</label>
                <span class="highlight"
                  >{{ departmentDetail.pharmacist_count || 0 }} 位</span
                >
              </div>
              <div class="info-item">
                <label>财务人员</label>
                <span class="highlight"
                  >{{ departmentDetail.finance_count || 0 }} 位</span
                >
              </div>
            </div>
          </div>
        </div>

        <!-- 科室简介 -->
        <div class="detail-section">
          <div class="section-header">
            <el-icon><Document /></el-icon>
            <span>科室简介</span>
          </div>
          <div class="section-content">
            <div class="info-item-full">
              <div class="info-content description-text">
                {{ departmentDetail.department_decription || "暂无简介" }}
              </div>
            </div>
          </div>
        </div>

        <!-- 系统信息 -->
        <div class="detail-section">
          <div class="section-header">
            <el-icon><Clock /></el-icon>
            <span>系统信息</span>
          </div>
          <div class="section-content">
            <div class="info-grid">
              <div class="info-item">
                <label>创建时间</label>
                <span>{{
                  departmentDetail.create_time
                    ? new Date(departmentDetail.create_time).toLocaleString()
                    : "未记录"
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <el-button @click="detailDrawer.visible = false">关闭</el-button>
        <el-button type="primary" @click="editDepartmentFromDetail">
          <el-icon><Edit /></el-icon>
          编辑信息
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
// 导入api接口
import {
  addDepartment,
  editDepartment,
  getDepartmentPager,
  getDepartmentTypeList,
} from "@/api/api";

const router = useRouter();
const store = useStore();

const username = ref(store.state.user?.username || "管理员");

// 统计卡片数据
const stats = reactive({
  clinicalCount: 0,
  technicalCount: 0,
  administrativeCount: 0,
  financeCount: 0,
  pharmacyCount: 0
});

//筛选条件
const filters = reactive({
  department_name: "",
  department_code: "",
  department_type: "",
  department_active: "",
});

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageTotal: 0,
});

// 存储科室类型列表
const departmentTypes = ref([]);
// 科室数据
const departments = ref([]);

// 科室对话框相关
const departmentDialog = reactive({
  visible: false,
  isEdit: false,
});

const departmentForm = reactive({
  department_id: "",
  department_code: "",
  department_name: "",
  department_type: 1,
  department_master: "",
  department_phone: "",
  department_location: "",
  department_beds: 0,
  doctor_count: 0,
  nurse_count: 0,
  pharmacist_count: 0,
  finance_count: 0,
  department_active: "0",
  department_decription: "",
});

const departmentRules = {
  department_code: [
    { required: true, message: "请输入科室编号", trigger: "blur" },
  ],
  department_name: [
    { required: true, message: "请输入科室名称", trigger: "blur" },
  ],
  department_type: [
    { required: true, message: "请选择科室类型", trigger: "change" },
  ],
  department_phone: [
    { required: true, message: "请输入联系电话", trigger: "blur" },
    {
      pattern: /^1[3-9]\d{9}$|^0\d{2,3}-\d{7,8}$/,
      message: "请输入正确的联系电话",
      trigger: "blur",
    },
  ],
  department_location: [
    { required: true, message: "请输入科室位置", trigger: "blur" },
  ],
  department_active: [
    { required: true, message: "请选择状态", trigger: "change" },
  ],
};

const departmentFormRef = ref(null);

const resetFilters = () => {
  filters.department_name = "";
  filters.department_code = "";
  filters.department_type = "";
  filters.department_active = "";
  loadDepartments();
};

const searchDepartments = () => {
  pagination.currentPage = 1;
  loadDepartments();
};

// 获取科室类型列表
const loadDepartmentTypes = async () => {
  try {
    const res = await getDepartmentTypeList();
    if (res && res.code === 200) {
      departmentTypes.value = res.data || [];
    } else {
      console.warn("获取科室类型列表失败，使用默认数据");
    }
  } catch (error) {
    console.error("获取科室类型列表出错:", error);
  }
};

// 获取科室分页数据
const loadDepartments = async () => {
  // 构造请求参数，使用后端分页字段 currentPage/pageSize，并将筛选字段做适配
  const params = {
    currentPage: pagination.currentPage,
    pageSize: pagination.pageSize,
    department_name: filters.department_name || undefined,
    department_code: filters.department_code || undefined,
    // 直接将筛选值转换为数字传给后端
    department_type:
      filters.department_type !== ""
        ? Number(filters.department_type)
        : undefined,
    department_active:
      filters.department_active !== ""
        ? Number(filters.department_active)
        : undefined,
  };

  try {
    const res = await getDepartmentPager(params);
    console.log(res);
    if (res && res.code === 200) {
      departments.value = res.data.data.map((item) => ({
        ...item,
        // 保证 department_active 在模板中按字符串比较 '0'/'1'
        department_active: String(
          item.department_active ?? item.department_active ?? ""
        ),
      }));
      pagination.total = res.data.total;
      pagination.pageTotal = res.data.pageTotal;
      Object.assign(stats, res.data.departmentStatus);
      return;
    }
  } catch (err) {
    console.error("调用 getDepartmentPager 失败，使用回退数据:", err);
  }
};

// 修改分页处理函数为 async，并在改变 pageSize 时重置到第一页
const handleSizeChange = async (size) => {
  pagination.pageSize = size;
  pagination.currentPage = 1;
  await loadDepartments();
};

const handleCurrentChange = async (page) => {
  pagination.currentPage = page;
  await loadDepartments();
};

const viewDepartmentDetails = (department) => {
  // 将后端可能的命名差异做兼容
  Object.assign(departmentDetail, {
    department_id: department.department_id ?? department.id ?? "",
    department_code: department.department_code ?? "",
    department_name: department.department_name ?? "",
    department_type:
      department.department_type !== undefined
        ? department.department_type
        : department.departmentType ?? 1,
    department_master: department.department_master ?? department.master ?? "",
    department_phone: department.department_phone ?? department.phone ?? "",
    department_location:
      department.department_location ?? department.location ?? "",
    department_beds: department.department_beds ?? department.beds ?? 0,
    doctorCount: department.doctor_count ?? department.doctorCount ?? 0,
    department_active: String(
      department.department_active ?? department.active ?? "0"
    ),
    department_decription:
      department.department_decription ??
      department.department_description ??
      department.description ??
      "",
    create_time: department.create_time ?? department.created_at ?? "",
  });

  detailDrawer.visible = true;
};

const editDepartmentFromDetail = () => {
  // 将详情数据赋回表单并打开编辑弹窗
  Object.assign(departmentForm, { ...departmentDetail });
  departmentDialog.isEdit = true;
  departmentDialog.visible = true;
  detailDrawer.visible = false;
};

const editDepartmenthandle = (department) => {
  Object.assign(departmentForm, department);
  departmentDialog.isEdit = true;
  departmentDialog.visible = true;
};

const deleteDepartment = (department) => {
  ElMessageBox.confirm(
    `确定要删除科室 ${department.department_name} 吗？此操作不可恢复！`,
    "删除确认",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      // 按正确的 id 字段删除
      departments.value = departments.value.filter(
        (d) => d.department_id !== department.department_id
      );
      ElMessage.success("删除成功");
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const showAddDepartmentDialog = () => {
  // 重置表单（使用和表单一致的字段名与默认值）
  Object.assign(departmentForm, {
    department_id: "",
    department_code: "",
    department_name: "",
    department_type: 1, // 使用数字编码 1/2/3
    department_master: "",
    department_phone: "",
    department_location: "",
    department_beds: 0,
    doctor_count: 0,
    nurse_count: 0,
    pharmacist_count: 0,
    finance_count: 0,
    department_active: "0",
    department_decription: "",
  });
  departmentDialog.isEdit = false;
  departmentDialog.visible = true;
};

const submitDepartmentForm = async () => {
  try {
    await departmentFormRef.value.validate();

    // 在提交前确保 department_type 是数字
    departmentForm.department_type = Number(departmentForm.department_type);

    if (departmentDialog.isEdit) {
      // 更新科室
      const res = await editDepartment(departmentForm);
      if (res && res.code === 200) {
        ElMessage.success("科室信息更新成功");
        await loadDepartments();
      } else {
        ElMessage.error(res?.message || "科室信息更新失败");
        return;
      }
    } else {
      // 新增科室：调用接口并根据返回判断
      const res = await addDepartment(departmentForm);
      if (res && res.code === 200) {
        ElMessage.success("科室添加成功");
        await loadDepartments();
      } else {
        ElMessage.error(res?.message || "科室添加失败");
      }
    }

    departmentDialog.visible = false;
  } catch (error) {
    console.error("表单验证或提交失败:", error);
  }
};

const exportData = () => {
  ElMessage.success("数据导出成功");
};

const refreshData = () => {
  loadDepartments();
  ElMessage.success("数据已刷新");
};

const formatDepartmentType = (type) => {
  // 从接口数据中查找对应的科室类型名称
  const foundType = departmentTypes.value.find(
    (item) => item.department_type_id === type
  );
  return foundType ? foundType.department_type_name : type;
};

// 新增：抽屉显示控制和详情数据（修复 undefined 错误）
const detailDrawer = reactive({
  visible: false,
});

const departmentDetail = reactive({
  department_id: "",
  department_code: "",
  department_name: "",
  department_type: 1,
  department_master: "",
  department_phone: "",
  department_location: "",
  department_beds: 0,
  doctor_count: 0,
  nurse_count: 0,
  pharmacist_count: 0,
  finance_count: 0,
  department_active: "0",
  department_decription: "",
  create_time: "",
});

onMounted(() => {
  loadDepartmentTypes();
  loadDepartments();
});
</script>

<style lang="scss" scoped>
.content-area {
  flex: 1;
  padding: 24px;
  background-color: #f5f7fa;
  height: 0; // 添加这行
  min-height: 100%; // 添加这行
  overflow-y: auto; // 确保有这行
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.stats-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-left: 4px solid;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.stats-card.clinical {
  border-left-color: #ff6b6b;
}

.stats-card.technical {
  border-left-color: #4ecdc4;
}

.stats-card.administrative {
  border-left-color: #45b7d1;
}

.stats-card.finance {
  border-left-color: #96ceb4;
}

.stats-card.pharmacy {
  border-left-color: #ffa726;
}

.stats-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.stats-card.clinical .stats-icon {
  background: #ffeaea;
  color: #ff6b6b;
}

.stats-card.technical .stats-icon {
  background: #e8f7f6;
  color: #4ecdc4;
}

.stats-card.administrative .stats-icon {
  background: #e8f4f8;
  color: #45b7d1;
}

.stats-card.finance .stats-icon {
  background: #e8f6ef;
  color: #96ceb4;
}

.stats-card.pharmacy .stats-icon {
  background: #fff3e0;
  color: #ffa726;
}

.stats-content {
  flex: 1;
  min-width: 0;
}

.stats-number {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1;
}

.stats-card.clinical .stats-number {
  color: #ff6b6b;
}

.stats-card.technical .stats-number {
  color: #4ecdc4;
}

.stats-card.administrative .stats-number {
  color: #45b7d1;
}

.stats-card.finance .stats-number {
  color: #96ceb4;
}

.stats-card.pharmacy .stats-number {
  color: #ffa726;
}

.stats-label {
  font-size: 13px;
  color: #606266;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

//筛选卡片
.filter-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

.filter-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* 确保表格容器有最小宽度 */
.department-table-container {
  min-width: 800px;
  overflow-x: auto;
}

.department-table {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.table-title {
  font-size: 18px;
  font-weight: 600;
}

.table-tools {
  display: flex;
  gap: 12px;
}

.department-info {
  display: flex;
  align-items: center;
}

.department-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #1a75bc;
}

.department-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: #1a75bc;
}

.action-buttons-cell {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

// 抽屉自定义头部
.drawer-custom-header {
  h3 {
    margin: 0;
    color: #303133;
    font-size: 18px;
    font-weight: 600;
  }
}

.drawer-content-wrapper {
  padding: 0 20px;
  height: 100%;
  overflow-y: auto;
}

// 个人信息卡片 - 橙色风格渐变
.staff-profile-card {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
  }
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.department-icon-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(255, 255, 255, 0.3);
  
  .el-icon {
    font-size: 32px;
    color: white;
  }
}

.profile-info {
  flex: 1;
  
  .staff-name {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: white;
  }
  
  .staff-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    
    .work-id {
      font-size: 14px;
      opacity: 0.9;
    }
  }
}

// 详细信息区域
.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f5f5f5;
  
  .el-icon {
    color: #ff9800;
    font-size: 16px;
  }
  
  span {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }
}

.section-content {
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  
  .info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    label {
      font-size: 13px;
      color: #909399;
      font-weight: 500;
    }
    
    span {
      font-size: 14px;
      color: #303133;
      font-weight: 500;
      
      &.highlight {
        color: #ff9800;
        font-weight: 600;
      }
    }
  }
  
  .info-item-full {
    display: flex;
    flex-direction: column;
    gap: 8px;
    
    label {
      font-size: 13px;
      color: #909399;
      font-weight: 500;
    }
    
    .info-content {
      font-size: 14px;
      color: #303133;
      line-height: 1.5;
      
      &.description-text {
        background: #f8f9fa;
        padding: 16px;
        border-radius: 8px;
        border-left: 4px solid #ff9800;
        min-height: 60px;
        white-space: pre-wrap;
      }
    }
  }
}

// 抽屉底部
.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
}

// 科室状态样式
:deep(.el-tag) {
  &.el-tag--primary {
    background-color: #fff3e0;
    color: #ff9800;
    border-color: #ffb74d;
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .drawer-custom-header h3 {
    color: #e0e0e0;
  }
  
  .detail-section {
    background: #2d2d2d;
    border-color: #3d3d3d;
  }
  
  .section-header {
    border-bottom-color: #3d3d3d;
    
    span {
      color: #e0e0e0;
    }
  }
  
  .info-item label {
    color: #a0a0a0;
  }
  
  .info-item span {
    color: #e0e0e0;
  }
  
  .info-content {
    color: #e0e0e0;
    
    &.description-text {
      background: #3d3d3d;
      border-left-color: #ff9800;
    }
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}


// 响应式设计
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .stats-card {
    padding: 16px;
  }
  
  .stats-number {
    font-size: 20px;
  }
  
  .stats-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .drawer-content-wrapper {
    padding: 0 16px;
  }
  
  .profile-header {
    flex-direction: column;
    text-align: center;
  }
  
  .staff-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .section-content .info-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .detail-section {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
}
</style>